<template>
  <view class="safe-area-container">
    <view class="container">

      <!-- 24小时用电量趋势 -->
      <view class="chart-container">
        <text class="chart-title">24小时用电量趋势</text>
        <canvas
            type="2d"
            id="dailyPowerChart"
            canvas-id="dailyPowerChart"
            class="power-canvas"
            @touchstart="onChartTouch('daily', $event)"
            @touchend="onChartTouchEnd"
        ></canvas>

        <!-- 动态数据提示框 -->
        <view
            v-if="dailyDataTooltip.show"
            class="data-tooltip"
            :style="{left: dailyDataTooltip.x + 'px', top: dailyDataTooltip.y + 'px'}"
        >
          <text class="tooltip-time">{{ dailyDataTooltip.time }}</text>
          <text class="tooltip-value">{{ dailyDataTooltip.value }} kW·h</text>
        </view>
      </view>

      <!-- 月用电量趋势 -->
      <view class="chart-container">
        <text class="chart-title">月用电量趋势</text>
        <canvas
            type="2d"
            id="monthlyPowerChart"
            canvas-id="monthlyPowerChart"
            class="power-canvas"
            @touchstart="onChartTouch('monthly', $event)"
            @touchend="onChartTouchEnd"
        ></canvas>

        <!-- 动态数据提示框 -->
        <view
            v-if="monthlyDataTooltip.show"
            class="data-tooltip"
            :style="{left: monthlyDataTooltip.x + 'px', top: monthlyDataTooltip.y + 'px'}"
        >
          <text class="tooltip-time">{{ monthlyDataTooltip.time }}</text>
          <text class="tooltip-value">{{ monthlyDataTooltip.value }} kW·h</text>
        </view>
      </view>

      <!-- 修改后的statistics部分 -->
      <view class="statistics">
        <view class="stat-card today">
          <view class="stat-header">
            <view class="stat-icon today-icon">
              <img src="../../static/日用电量.png" alt="">
            </view>
            <text class="stat-label">今日用电量</text>
          </view>
          <text class="stat-value">{{ todayPower }}
            <text class="unit">kW·h</text>
          </text>
          <view class="stat-footer">
            <text class="stat-trend">↗ 较昨日+12%</text>
          </view>
        </view>

        <view class="stat-card month">
          <view class="stat-header">
            <view class="stat-icon month-icon">
              <img src="../../static/月用电量.png" alt="">
            </view>
            <text class="stat-label">本月用电量</text>
          </view>
          <text class="stat-value">{{ monthPower }}
            <text class="unit">kW·h</text>
          </text>
          <view class="stat-footer">
            <text class="stat-trend">↘ 较上月-5%</text>
          </view>
        </view>
      </view>

      <!--设备用电占比饼图 -->
      <!-- 修改后的设备用电占比容器 -->
      <view class="device-pie-chart-container">
        <view class="chart-header">
          <text class="chart-title">设备用电量占比</text>
          <text class="chart-switch" @tap="toggleChartType">
            {{ showPieChart ? '▨ 柱状图' : '◔ 饼图' }}
          </text>
        </view>

        <!-- 饼图画布 -->
        <canvas
            v-if="showPieChart"
            type="2d"
            id="devicePieChart"
            canvas-id="devicePieChart"
            class="device-pie-canvas"
        ></canvas>

        <!-- 柱形图画布 -->
        <canvas
            v-else
            type="2d"
            id="deviceBarChart"
            canvas-id="deviceBarChart"
            class="device-bar-canvas"
        ></canvas>

        <!-- 在 canvas 之后添加 -->
        <view class="device-pie-legend">
          <view
              v-for="item in devicePieData"
              :key="item.name"
              class="legend-item"
          >
            <view
                class="legend-color"
                :style="{backgroundColor: item.color}"
            ></view>
            <text class="legend-text">
              {{ item.name }} ({{
                (item.value / devicePieData.reduce((sum, i) => sum + i.value, 0) * 100).toFixed(1)
              }}%)
            </text>
          </view>
        </view>
      </view>


      <view class="device-pie-chart-container">
        <view class="chart-header">
          <text class="chart-title">本月与上月对比图</text>
        </view>

        <canvas
            type="2d"
            id="powerComparisonChart"
            canvas-id="powerComparisonChart"
            class="power-comparison-canvas"
        ></canvas>


        <!-- 在 canvas 之后添加 -->
        <view class="device-pie-legend">
          <!-- 本月图例 -->
          <view class="legend-item">
            <view
                style="background-color: #00fff3; width: 16rpx; height: 16rpx; border-radius: 50%; margin-right: 8rpx;"></view>
            <text class="legend-text">本月</text>
          </view>

          <!-- 上月图例 -->
          <view class="legend-item" style="margin-left: 20rpx;">
            <view
                style="background-color: #ff0000; width: 16rpx; height: 16rpx; border-radius: 50%; margin-right: 8rpx;"></view>
            <text class="legend-text">上月</text>
          </view>
        </view>


      </view>
    </view>
  </view>
</template>

<script>
import power from "./power";

export default power
</script>

<style scoped>
@import "power.css";
</style>